<template>
  <div className="form-designer-right item-ignore-click">
    <el-tabs v-model='showTab'>
      <el-tab-pane name="form" label="表单属性">
        <FormConfiguraion :designView='designView'
                          @formConfigChange='formConfigChange'
                          :formDefinition='formDefinition'/>
      </el-tab-pane>
      <el-tab-pane name="formItem" label="控件属性" v-if='editingFieldDefinition'>
        <FSection title="字段属性">
          <FormPropertyConfiguration :formDefinition='formDefinition'
                                     :designView='designView' :editingFieldDefinition="editingFieldDefinition"
                                     @fieldConfigChange='fieldConfig => this.onFieldConfigChange(fieldConfig)'
                                     ref="FormPropertyConfiguration"/>
        </FSection>

        <FSection title="明细表属性" v-if="editingSubFormDefinition">
          <div style="padding: 0 10px">
            <el-form-item label="表单名称">
              <el-input placeholder="请输入字段名称" v-model="editingSubFormDefinition.showName"/>
            </el-form-item>

            <el-form-item label="数据库表">
              <el-input placeholder="请输入数据库表名称" v-model="editingSubFormDefinition.tableName"/>
            </el-form-item>

            <el-form-item label="formName">
              <el-input placeholder="请输入formName" v-model="editingSubFormDefinition.formName"/>
            </el-form-item>
          </div>
        </FSection>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import FormPropertyConfiguration from '@/components/form/FormPropertyConfiguration';
import FormConfiguraion from '@/components/form/FormConfiguraion.vue';
import {DefaultFormDefinition, DefaultViewDefinition} from '@/components/form/DefaultFormDefinition';
import {isEmpty, isNotEmpty} from '@/utils/CommonUtils';
import FSection from '@/components/FSection';

export default {
  components: {
    FSection,
    FormConfiguraion,
    FormPropertyConfiguration
  },
  props: {
    designView: {
      type: Object,
      default: () => JSON.parse(JSON.stringify(DefaultViewDefinition))
    },
    editingFieldDefinition: {
      type: Object,
      default: () => undefined
    },
    isShowFormPropertyConfiguration: {
      type: Boolean,
      default: true
    },
    formDefinition: {
      type: Object,
      default: () => JSON.parse(JSON.stringify(DefaultFormDefinition))
    }
  },
  data() {
    return {
      showTab: 'form',
      editingSubFormDefinition: undefined
    };
  },
  methods: {
    formConfigChange() {
      this.$emit('formConfigChange', this.designView.width);
    },
    onFieldConfigChange(fieldConfig) {
    },
    findEditingSubFormDefinition() {
      if (isEmpty(this.editingFieldDefinition)) {
        this.editingSubFormDefinition = undefined;
        return;
      }
      let subForms = this.formDefinition.subForms;
      for (let i = 0; i < subForms.length; i++) {
        let form = subForms[i];
        let fields = form.fields;
        let index = fields.findIndex(f => f.id === this.editingFieldDefinition.id);
        if (index !== -1) {
          this.editingSubFormDefinition = form;
          return;
        }
      }
    },
  },
  watch: {
    editingFieldDefinition(val) {
      if (isNotEmpty(val)) {
        this.showTab = 'formItem';
      } else {
        this.showTab = 'form';
      }
      this.findEditingSubFormDefinition();
    },
  }
};
</script>
